<template>
  <!-- <Person :personList="personList"/> -->
  <Person />
</template>


<script lang="ts">
export default {
  name: 'App',
}


</script>

<!-- 父组件 -->
<script lang="ts" setup>
import { reactive } from 'vue';
import Person from './components/Person.vue'
import { type Persons  } from '@/types/index';



// 数组定义
let personList = reactive<Persons>( [
  {id:'jdfosjfslsjdsiofjdsifds1',name:'frank1',age:18},
  {id:'jdfosjfdlfjdsiofjdsifds2',name:'frank2',age:19},
  {id:'jdfosnomlsfjjdsfjdsifds3',name:'frank3',age:20}
])

// console.log(personList)

</script>

<style>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  padding: 10px;
  margin: 0 5px;
}
</style>